<script>
import { ref, toRefs, onMounted, watch, watchEffect } from "vue";
export default {
  emits: ["todo"],
  props: {
    chuan: String,
  },
  setup(props, context) {
    // console.log(props, "props");
    // console.log(context, "context");
    const { chuan } = toRefs(props);
    // console.log(chuan.value);
    // setTimeout(() => {
    //   console.log(chuan.value);
    // }, 6000);
    const p = 0;
    const todo = () => {
      context.emit("todo", "这是子组件传给父组件的值");
    };
    const receiveData = ref(null);
    onMounted(() => {
      // receiveData.value = chuan.value;
      watch(chuan, (n) => {
        console.log(n);
      });
      // watch(chuan, (n) => {
      //   receiveData.value = n;
      // });
      watchEffect(() => {
        receiveData.value = chuan.value;
      });
    });
    return {
      props,
      receiveData,
      p,
      todo,
    };
  },
  render() {
    return (
      <>
        <div>
          <h3>this is my asyncComponent</h3>
          <span>{this.receiveData}</span> <br />
          <button onClick={() => this.todo()}>子传父</button>
        </div>
      </>
    );
  },
};
</script>